//设置第三方裁剪
let $image = $(".container img");
let options = {
  aspectRatio: 1,
  preview: ".preview",
};
$image.cropper(options);
//上传模块
$('#btnChooseImage').on('click',function(){
   $('#file').click()
})
$('#file').on('change',function(){
   const file=this.files[0]
   if(!file){
     return
   }
   const fileSrc=URL.createObjectURL(file)
   $image
   .cropper('destroy')      // 销毁旧的裁剪区域
   .attr('src', fileSrc)  // 重新设置图片路径
   .cropper(options)    
})
// 上传图片，把图片转为base64
$('#btnCreateAvatar').click(function () {
   // 剪裁得到一张图片（canvas图片）
   let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
       width: 100,
       height: 100
   });

   // 把图片转成base64格式
   let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
   console.log(dataURL);
   // axios
   axios
       .post("/my/update/avatar", `avatar=${encodeURIComponent(dataURL)} `)
      .then(({ data:{status,message}}) => {
           // 提示
           if (status !== 0) {
               // 失败
               return layer.msg(message)
           }

           layer.msg(message)
           // 页面中的头像发生变化（更新）
           window.parent.getUserInfo()
      });
});